<template>
  <div class="readBookTop">
    <navigation class="d-none d-md-block">
      <router-link :to='this.$store.state.loginPath' slot="login" class="navbar-brand">{{this.$store.state.loginState}}</router-link>
      <router-link to='/home' slot="home" class="nav-link">首页</router-link>
      <router-link to='/userOnlineHistry' slot="history" class="nav-link">书库</router-link>
      <router-link to='/details' slot="details" class="nav-link">商城</router-link>

      <div slot="search" class="d-flex align-items-center">
        <p class="text-white">添加书签</p>
      </div>
    </navigation>

    <!-- 仅在小于md的屏幕展现 -->
    <mobile-navigation class="d-block d-md-none d-flex justify-content-between align-items-center container shadow-sm navigation">
      <img slot="left" src="@/assets/img/MobileBanner/back_white.png" alt="" class="mr-4" style="height: 25px;" @click="backPath">
      <div slot="right" class="text-white" style="">添加书签</div>
    </mobile-navigation>
  </div>
</template>

<script>
  import Navigation from 'components/Navigation/Navigation'
  import MobileNavigation from 'components/Mobile/MobileNavigation'

  export default {
    name: 'ReadBookTop',
    components: {
      Navigation,
      MobileNavigation
    },
    data () {
      return {

      }
    },
    methods: {
      backPath() {
        // 返回进入此组件之前的路由，这里不能保存上一级返回目录，
        // 因为地址是一个栈，每进入一个路由的时候就会压栈，会遵从先进后出，后进先出。
        this.$router.go(-1)
      }
    }
  }

</script>

<style scoped>
  .readBookTop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
  }
  .navigation {
    background-color: #333;
  }
</style>